<template>
    <div class="app-set-personalInfo">
        <div class="setting-panel flex-x">
            <img src="@/assets/images/avatar.png" alt="" class="app-set-personalInfo-avatar" />
            <div ml8 leh-12>
                <p fs-13>{{ userStore.userInfo.name }}</p>
                <p fs-12 mt5 class="d-sub">{{ userStore.userInfo.email }}</p>
            </div>
        </div>
        <div class="setting-panel" mt20 mb20>
            <a href="#" fs-13 leh-24 class="d-primary link">修改信息</a>
        </div>
        <div class="setting-panel" mb20>
            <a href="#" fs-13 leh-24 class="d-primary link">同步到本地</a>
        </div>
        <p ml8 leh-24>上次备份：{{formatDate(backupTime)}}</p>
        <div class="setting-panel" mb20>
            <a href="#" fs-13 leh-36 class="d-primary link">立即备份</a>
            <a href="#" fs-13 leh-36 class="d-primary link">管理历史备份</a>
        </div>
        <div class="setting-panel" mb20>
            <a href="#" fs-13 leh-36 class="d-primary link">导出备份数据</a>
            <a href="#" fs-13 leh-36 class="d-primary link">导入备份数据</a>
        </div>
        <div class="setting-panel" mb20>
            <p fs-13 leh-24 style="color:rgb(251,56,56);">退出登录</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/module/user';

const userStore = useUserStore()
const backupTime = new Date().valueOf()
</script>

<style scoped lang="scss">
.app-set-personalInfo {
    &-avatar {
        height: 36px;
        width: 36px;
        border-radius: 6px;
    }

    .link {
        display: block;

        &:hover {
            font-weight: 700;
        }
    }
}
</style>